<template class="comment-page">
  <view class="">
    
      <view class="fl-box" @click="asgsjdf">
        <!-- <view class="myrole">
          <view class="" style="width: 100%;height: 70rpx;display: flex;align-items: center;justify-content: space-between;">
            <view class="my-name">我的角色</view>
            <view class="" v-if="moreshow" @click="loadmore">更多</view>
            <view class="" v-if="pakeshow" @click="pake">收起</view>
          </view>
          
          <view class="addmybox">
          
            <view class="sdoifbox" v-for="item in roleList" :key="item.id" >
                <view class="" style="width: 100%;display: flex;justify-content: space-between;align-items: center;position: relative;" @click="aiduito(item)" @longpress="longPressHandler(item,true)">
          
              <view v-if="item.redact == true" class="edit" @click.stop>
                <view class="amend"  @click="amendbtn(item)" >编辑</view>
                <view class="delete" @click="zdydelete(item)">删除</view>
              </view>
                  <view class="" style="width: 40%;display: flex;justify-content: center;position: relative;">
                    <view class="jcback" :style="{backgroundColor:item.back}">
                      {{item.ico}}
                    </view>
                  </view>
                  <view class="smbox-right2">
                    <view class="smbox-title">{{item.title}}</view>
                    <view class="smbox-image2">
                      <span><image class="presented2" src="https://www.iwangbang.com/skin/wx_mp_aixz/watch.png" mode=""></image>{{item.view}}</span>
                      <span ><image class="critic2" src="https://www.iwangbang.com/skin/wx_mp_aixz/critic.png" mode=""></image>{{item.use}}</span>
                    </view>
                  </view>
                </view>
            </view>
            <view class="add-box" @click="addzdybtn">
              <image class="addzdy" src="/static/addzdy.png" mode=""></image>
            </view>
          </view>
          
        </view> -->
        
        <view class="fl-detail "  v-for="(item,index) in list" :key="index" >
          <view style="display: flex;justify-content: space-between;">
            <view class="detail-name">{{item.name}}</view>
            <!-- <view style="margin-top: 20rpx;" class="" @click="more(item.id)" v-if="item.greater == true">更多</view>
            <view style="margin-top: 20rpx;" class="" @click="back(item)" v-if="item.greater == '收起'">收起</view> -->
          </view>
          <view class="" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
            <view class="detail-fl" v-for="(item2,index2) in item.list" :key="index2">
              <view class="detail-smbox" @click="toredact(item2.title,item2)">
                <view class="" style="width: 35%;display: flex;justify-content: center;">
                  
                  <image class="image" :src="item2.ico " mode="" ></image>
                </view>
                <view class="smbox-right">
                  <view class="smbox-title">{{item2.title}}</view>
                  <view class="smbox-image">
                    <span><image class="presented" src="https://www.iwangbang.com/skin/wx_mp_aixz/watch.png" mode=""></image>{{item2.view}}</span>
                    <span><image class="critic" src="https://www.iwangbang.com/skin/wx_mp_aixz/critic.png" mode=""></image>{{item2.use}}</span>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        
      </view>
  
  </view>
</template>
<script>
export default {
  onShareAppMessage(res) {
    console.log(res);
    console.log(uni.getStorageSync('wbyun_icode'));
    return {
          title: '小帮观影，我的AI影评顾问',
          imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
          path: '/pages/index/index?inviteCode=' + uni.getStorageSync('wbyun_icode')
        }
  },
  data() {
    return {
      list:[
        {'name':'文案处理',
          'list':[{'title':'PDF转Word','ico':'/static/work-box/1PDF转Word.png','view':'994','use':'865'},{'title':'PDF转Excel','ico':'/static/work-box/1PDF场景化编辑.png','view':'598','use':'432'},{'title':'PDF转PPT','ico':'/static/work-box/1PDF转PPT.png','view':'735','use':'468'},{'title':'文档转PDF','ico':'/static/work-box/1文档转PDF.png','view':'963','use':'785'},{'title':'批量图片识别','ico':'/static/work-box/1批量图片识别.png','view':'878','use':'235'},{'title':'拍照识别','ico':'/static/work-box/1OCR文字识别.png','view':'435','use':'235'}]},
          {'name':'AI助理',
          // {'title':'AI绘画','ico':'/static/work-box/2AI绘画.png'},
          'list':[{'title':'AI对话','ico':'/static/work-box/2AI对话.png','view':'867','use':'632'},{'title':'AI写方案','ico':'/static/work-box/2AI写方案.png','id':"29",'view':'854','use':'235'},{'title':'AI媒体达人','ico':'/static/work-box/2AI媒体达人.png','id':"30",'view':'794','use':'235'},{'title':'面试达人','ico':'/static/work-box/mianshidaren.png','id':"32",'view':'594','use':'438'}]},
          {'name':'趣味AI',
          'list':[{'title':'AI女朋友','ico':'/static/work-box/3女朋友.png','id':"60",'view':'964','use':'346'},{'title':'AI男朋友','ico':'/static/work-box/3男朋友.png','id':"61",'view':'766','use':'736'},{'title':'AI键盘侠','ico':'/static/work-box/3键盘侠.png','id':"62",'view':'997','use':'736'},{'title':'AI佛陀','ico':'/static/work-box/3佛陀.png','id':"262",'view':'845','use':'736'},{'title':'AI宠物猫','ico':'/static/work-box/3宠物猫.png','id':"64",'view':'956','use':'356'},{'title':'AI宠物狗','ico':'/static/work-box/3宠物狗.png','id':"65",'view':'849','use':'457'}]},
        ],
      showlist:[],
      addzdy:{
        'title':'',
        'command':'',
        'description':''
      },
      roleList:[],
      moreshow:false,
      pakeshow:false,
      alllist:[],
      random:'',
      compile:false
    };
  },

  computed: {

  },
  onLoad() {
    this.getList()
    this.getzdyrole()
  },
  onShow() {
    this.getList()
    this.getzdyrole()
  
  },
  methods: {
    getList() {
      uni.request({
      	url: getApp().globalData.apiDomain+'/airole/airole_type?nav='+'模拟',
      	method: 'GET',
      	header: {
      		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
      		'token': uni.getStorageSync('wbyun_token'),
          'wbapp':'weixin_mp_aixz'
      	},
      	data: {},
      	dataType: 'json',
      	success:  res => {
          console.log(res);
      		if (res['data']['code'] == 200) {
            // this.list = res.data.datas
            // this.list.map((item,index) => {
            //   Object.assign(item,{greater: ''})
            //   if(item.list.length > 6) {
            //      item.greater = true
            //      item.list.splice(6,item.list.length)
            //   }
            //   console.log(item);
            // })
      			return;
      		} else { 
      			uni.showToast({
      				title: res['data']['msg'],
      				icon: 'none'
      			});
      		}
      	},
      	fail: () => {},
      	complete: () => {
      	}
      });
    },
    toredact(e,item2) {
      console.log(e);
      if(e == 'PDF转Excel') {
        uni.navigateTo({
          url:'/pagesE/pdfredact/pdfredact'
        })
      }else if(e == '拍照识别') {
        uni.navigateTo({
          url:'/pagesE/ocrwzsb/ocrwzsb'
        })
      }else if(e == 'PDF转Word') {
       
        uni.navigateTo({
          url:'/pagesE/pdfzword/pdfzword'
        })
        
      }else if(e == 'PDF转PPT') {
        uni.navigateTo({
          url:'/pagesE/pdfzppt/pdfzppt'
        })
      }else if(e == '文档转PDF') {
        uni.navigateTo({
          url:'/pagesE/wdzpdf/wdzpdf'
        })
      }else if(e == '批量图片识别') {
        uni.navigateTo({
          url:'/pagesE/batchocr/batchocr'
        })
      }else if(e == 'AI绘画') {
        uni.navigateTo({
          url:'/pages/drawing/drawing'
        })
      }else if(e == 'AI对话') {
        uni.navigateTo({
          url:'/pages/aidialog/aidialog'   
        })
      }else {
        console.log(e,item2);
        // uni.navigateToMiniProgram({
        //   appId: 'wx36bee4da16f3faa2',
        //   path: '',
        //   extraData: {
        //     'data1': 'test'
        //   },
        //   success(res) {
        //     // 打开成功
        //   }
        // })
       uni.navigateTo({
         url:"/pages/dialogue/dialogue?title="+ item2.title +'&id='+item2.id +'&description='+'请输入您的问题，或详细需求...'
       })
      }
 
    },
    longPressHandler(i,e) {
      console.log('changan',i,e);
      this.roleList = [...this.roleList]
      this.roleList.map(item => {
        if(item.id == i.id) {
          this.$set(item,'redact',true)
        }
      })
      console.log(this.roleList);
    },
     asgsjdf() {
       this.roleList = [...this.roleList]
       this.roleList.map(item => {
         if(item.redact == true) {
           this.$set(item,'redact',false)
         }
       })
     },
    zdydelete(e) {
      console.log(e);
      
      uni.request({
      	url: getApp().globalData.apiDomain+'airole/delairole',
      	method: 'POST',
      	header: {
      		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
      		'token': uni.getStorageSync('wbyun_token'),
          'wbapp':'weixin_mp_aixz'
      	},
      	data: {
          'jsid':e.id
        },
      	dataType: 'json',
      	success:  res => {
          console.log(res);
      		if (res['data']['code'] == 200) {
              uni.showToast({
                title: res['data']['msg'],
                icon: 'none'
              });
              this.getzdyrole()
      			return;
      		} else { 
      			uni.showToast({
      				title: res['data']['msg'],
      				icon: 'none'
      			});
      		}
      	},
      	fail: () => {},
      	complete: () => {
      	}
      });
      
    },
    amendbtn(e) {
      uni.request({
      	url: getApp().globalData.apiDomain+'airole/updateairole',
      	method: 'GET',
      	header: {
      		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
      		'token': uni.getStorageSync('wbyun_token'),
          'wbapp':'weixin_mp_aixz'
      	},
      	data: {
          'jsid':e.id
        },
      	dataType: 'json',
      	success:  res => {
          console.log(res);
      		if (res['data']['code'] == 200) {
            let ndata = JSON.parse(JSON.stringify(res.data.datas))
            console.log(ndata);
            uni.navigateTo({
              url: '/pagesC/modification/modification?jsid='+ndata.id+'&title='+'修改角色'+'&description='+ndata.description+'&command='+ndata.command+'&name='+ndata.title+'&id=9998'
            })
              
      			return;
      		} else { 
      			uni.showToast({
      				title: res['data']['msg'],
      				icon: 'none'
      			});
      		}
      	},
      	fail: () => {},
      	complete: () => {
      	}
      });
    },
    more(e) {
      console.log(e);
      uni.request({
      	url: getApp().globalData.apiDomain+'/airole/airole_type?nav='+'模拟',
      	method: 'GET',
      	header: {
      		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
      		'token': uni.getStorageSync('wbyun_token'),
          'wbapp':'weixin_mp_aixz'
      	},
      	data: {},
      	dataType: 'json',
      	success:  res => {
          console.log(res);
      		if (res['data']['code'] == 200) {
              res.data.datas.map(item => {
                if(item.id ==e) {
                  this.showlist = item
                  Object.assign(item,{greater: true})
                  console.log(this.showlist);
                  this.againget(e)
                }
              })
      			return;
      		} else { 
      			uni.showToast({
      				title: res['data']['msg'],
      				icon: 'none'
      			});
      		}
      	},
      	fail: () => {},
      	complete: () => {
      	}
      })
      
      
    },
    againget(e) {
      console.log(e);
      console.log(this.list);
     this.list.map(item => {
           if(item.id == e) {
             console.log(item.id);
             item.greater = '收起'
             item.list = this.showlist.list
           }
         })
    },
    back(e) {
      console.log(e);
      e.greater = true
      e.list.splice(6,e.list.length)
    },
    addzdybtn() {
      uni.navigateTo({
        url: '/pagesC/oneselfcreate/oneselfcreate?id=9998'+'&title='+'创建角色',
      });
      
    },
    getzdyrole() {
      uni.request({
      	url: getApp().globalData.apiDomain+'/airole/airole?tid=9998',
      	method: 'GET',
      	header: {
      		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
      		'token': uni.getStorageSync('wbyun_token'),
          'wbapp':'weixin_mp_aixz'
      	},
           
      	dataType: 'json',
      	success:  res => {
          console.log(res,'111111111');
      		if (res['data']['code'] == 200) {
            console.log(res.data.datas,'888888888888');
            if(res.data.datas == undefined) return
             this.roleList = JSON.parse(JSON.stringify(res.data.datas))
             this.roleList.map(item => {
              item.ico = item.title.substr(0,1)
              let backcolor= this.randomBackgroundColor()
              Object.assign(item,{back: backcolor,redact:false})
            })
            
            this.alllist = JSON.parse(JSON.stringify(this.roleList))
            console.log(this.alllist,'00000');
            if(this.roleList.length>= 6) {
              this.roleList.splice(5,this.roleList.length)
              this.moreshow = true
              this.pakeshow = false
            }
            
            console.log(this.roleList);
      			return;
      		} else { 
      			uni.showToast({
      				title: res['data']['msg'],
      				icon: 'none'
      			});
      		}
      	},
      	fail: () => {},
      	complete: () => {
      	}
      });
    },
    climyopen(e) {
      console.log(e);
    },
    loadmore() {
      this.moreshow = false
      this.pakeshow = true
      console.log();
      console.log(this.alllist);
      this.roleList = JSON.parse(JSON.stringify(this.alllist))
     
    },
    pake() {
      this.moreshow = true
      this.pakeshow = false
      
      this.roleList.splice(5,this.roleList.length)
        
     
    },
    // 随机生成背景颜色
    randomBackgroundColor() {
      let red = Math.floor(Math.random() * 256);
      let green = Math.floor(Math.random() * 256);
      let blue = Math.floor(Math.random() * 256);
      this.random = "rgb(" + red + "," + green + "," + blue + ")";
      return this.random
    },
    //文件转换
  
   
    
    
 
  },

};
</script>
<style  scoped lang="less">
  body {
    background-color: rgb(247,247,247);
    .fl-box {
      width: 95%;
      margin: auto;
      .myrole {
        width: 100%;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 15rpx;
        margin: 40rpx 0;
        
      }
      
      .fl-detail {
        width: 100%;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 15rpx;
        margin: 40rpx 0;
      
        .detail-name {
          font-size: 36rpx;
          font-weight: 700;
          color: #595959;
          margin-top: 20rpx;
          margin-bottom: 35rpx;
        }
        .detail-fl {
          width: 49%;
          height: 120rpx;
          display: flex;
          align-items: center;
          border-radius: 15rpx;
          background-color: rgb(247,247,248);
          margin: 10rpx 0;
          .detail-smbox {
            width: 100%;
            display: flex;
            justify-content: start;
            
            .image {
              width: 100rpx;
              height: 100rpx;
            }
            .smbox-right {
              flex: 1;
              padding-right: 5rpx;
              display: flex;
              flex-direction: column;
              
              justify-content: space-between;
              margin-top: 10rpx;
              margin-left: 5rpx;
              
              .smbox-title {
                font-weight: 700;
                
              }
              .smbox-image {
                width: 97%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #959595 !important;
                font-size: 25rpx;
                span {
                  display: flex;
                  align-items: center;
                  
                  .presented {
                    width: 45rpx;
                    height: 45rpx;
                  
                    
                  }
                  .critic {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 5rpx;
                  }
                }
                  
              }
              
            }
          }
          
        }
        
      }
    }
  }
  .add-box {
    width: 49%;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15rpx;
    background-color: rgb(247,247,248);
    margin: 10rpx 0;
    .addzdy {
      width: 120rpx;
      height: 120rpx;
    } 
  }
.addzdy-box {
  width: 600rpx;
  height: 650rpx;
  .zdyclear {
    position: absolute;
    right: 0;
  
  }
}
.addtitle {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(3,188,191);
  color: #fff;
}
.addinput {
  width: 400rpx;
  height: 80rpx;
  padding: 5rpx 10rpx;
  border: 0;
  background-color: #f7f7f7;
  flex: 1;
  
}
.inpbox {
  display: flex;
  margin: 30rpx 0;
  align-items: center;
}
.txtbox {
  display: flex;
  margin: 30rpx 0 30rpx 0;
}
.addtxt {
  flex: 1;
  height: 200rpx;
  border: 0;
  background-color: #f4f4f4;
  padding: 20rpx;
}
.btn-box {
  display: flex;
  
  .zdybtn1,.zdybtn2 {
    width: 45%;
    height: 60rpx;
    line-height: 60rpx;
    color: #fff;
    border: 0;
    font-size: 30rpx;
  }
  .zdybtn1 {
    background-color: rgb(3,188,191);
  }
  .zdybtn2 {
      background-color: rgb(41,121,255);
    }
}
.addmybox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sdoifbox {
  width: 49%;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 15rpx;
  background-color: rgb(247,247,248);
  margin: 10rpx 0;
}
.myimage {
  width: 100rpx;
  height: 100rpx;
}
 .smbox-right2 {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-top: 10rpx;
              margin-left: 10rpx;
              .smbox-title {
                font-weight: 700;
              }
              .smbox-image2 {
                width: 97%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #959595 !important;
                font-size: 25rpx;
                span {
                  display: flex;
                  align-items: center;
                  margin-right: 10rpx;
                  .presented2 {
                    width: 45rpx;
                    height: 45rpx;
                    margin-right: 5rpx;
                  }
                  .critic2 {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 5rpx;
                  }
                }
                  
              }
              
            }
            .my-name {
              height: 50rpx;
              font-size: 36rpx;
              font-weight: 700;
              color: #595959;
            }
            .jcback {
              width: 100rpx;
              height: 100rpx;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 40rpx;
              color: #fff;
            }
            .edit {
              position: relative;
              position: absolute;
              width: 100%;
              height: 120rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 999;
              background-color: #ccc;
              border-radius: 15rpx;
            }
           
            .delete {
              width: 80rpx;
              background-color: red;
              color: #fff;
              height: 80rpx;
              line-height: 80rpx;
              border-radius: 50%;
              text-align: center;
              margin: 0 30rpx;
            }
            .amend {
              width: 80rpx;
              background-color: #04BABE;
              color: #fff;
              height: 80rpx;
              line-height: 80rpx;
              border-radius: 50%;
              text-align: center;
              margin: 0 30rpx;
            }
</style>